<template>
  <div>
    <!--  1.标题-->
    <h1>进行密码找回</h1>
    <!--  2.表单-->
    <div>
      <van-form>
        <van-cell-group inset>
          <van-field
              v-model="user.phone"
              label="手机号"
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
          />
        </van-cell-group>
        <van-cell-group inset>
          <van-field
              v-model="code"
              center
              clearable
              label="验证码"
              placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary">发送验证码</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <van-cell-group inset>
          <van-field
              v-model="user.password"
              type="password"
              label="新密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
          <van-cell-group inset>
          <van-field
              v-model="password2"
              type="password"
              label="确认密码"
              placeholder="请再次输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="button" @click="add">
            密码找回
          </van-button>
        </div>
      </van-form>

    </div>
    <!--  3.左右 跳转-->
    <div>
      <router-link style="float: left" to="/login">登录账号</router-link>
      <router-link style="float:right;" to="/register">注册账号</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindPass",
  data(){
    return{
      user:{},
      code:"",
      password2:""
    }
  }
}
</script>

<style scoped>

</style>